<!--
    @作者：814878176@qq.com
    @时间：2020-03-30
    @描述：首页-菜单导航
	@使用："path": "pages/tabBar/home/homeNav"
 -->
<template>
	<view class="uni-h-100p">
		<image class="uni-image img-bg" mode="widthFix" :src="home_guide.background_img" />
		<view class="content-wrapper">
			<view class="img-logo uni-align-c uni-m-b-20">
				<image class="uni-image" mode="widthFix" :src="home_guide.small_title_img" />
			</view>
			<view class="img-title uni-align-c uni-m-b-40">
				<image class="uni-image" mode="widthFix" :src="home_guide.title_img" />
			</view>
			<view class="navs-wrapper">	
				<view class="nav-item" @click="goDetailPage(home_guide.game_url,true)">
					<image class="uni-image" mode="widthFix" :src="home_guide.game_button" />
				</view>
				<view class="nav-item" v-for="(item,index) in lists" :key="index"
					 @click="goDetailPage(item.router)">
					<image class="uni-image" mode="widthFix" :src="item.url" />
				</view>
			</view>
		</view>
		<view v-if="!showPage" class="bank-wrapper"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPage: false,
				navigateFlag: false,
				lists: [
					{
						name: "活动主题1",
						url: "/static/home/nav_1.png",
						router: "activityOne/index"
					},
					{
						name: "活动主题2",
						url: "/static/home/nav_2.png",
						router: "activityTwo/index"
					}
				],
				home_guide: {}
			}
		},
		onLoad() {
			if(!sessionStorage.getItem("isFirstComeIn")) {
				uni.navigateTo({
					url: "/pages/home/home"
				});
			}
			// 缓存数据
			let home_guide = sessionStorage.getItem( "home_guide" );
			if(home_guide) {
				home_guide = JSON.parse( home_guide );
				this.setData( home_guide );
			}else {
				this.getDatas();
			}
		},
		mounted() {
		},
		methods: {
			// 页面路由跳转
			goDetailPage(path,toPage) {
				if(toPage) {
					this.$openURL( path );
				}else {
					uni.navigateTo({
						url: "/pages/" + path
					});
				}
			},
			/**
			 * 
			 * http://a.yuncjs.cn/index.php/getText?page_no=global
			 */
			getDatas() {
				this.$request({
						 method: "GET",
						 url: PATHAPI + '/index.php/text',
						 params: {
							page_no: "home_guide" 
						 },
						 data: {},
						 success: (res) => {
							if(res.data.status == 'success'){
								let data = res.data.data || {};
								this.setData(data);
								this.showPage = true;  // 隐藏白页
								sessionStorage.setItem( "home_guide",JSON.stringify( data || {} ) );
							}
						 }
				});
			},
			/**
			 * @param {Object} data
			 */
			setData(data) {
				data.background_img = data.background_img || {};
				data.small_title_img = data.small_title_img || {};
				data.title_img = data.title_img || {};
				data.game_button = data.game_button || {};
				data.game_url = data.game_url || {};
				data.btn_activity1 = data.btn_activity1 || {};
				data.btn_activity2 = data.btn_activity2 || {};
				this.home_guide.background_img = data.background_img.file_url || "/static/home/bg_2.png";
				this.home_guide.small_title_img = data.small_title_img.file_url || "/static/home/logo_1.png";
				this.home_guide.title_img = data.title_img.file_url || "/static/home/logo_2.png";
				this.home_guide.game_button = data.game_button.file_url || "/static/home/nav_3.png";
				this.home_guide.game_url = data.game_url.content;
				this.lists[0].url = data.btn_activity1.file_url || this.lists[0].url;
				this.lists[1].url = data.btn_activity2.file_url || this.lists[1].url;
				this.showPage = true;  // 隐藏白页
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import "../../common/css/var.styl"   
	.img-bg {
		width: 100%;
		height: 100% !important;
	}
	.content-wrapper {
		position: absolute;
		top: 0;
		width: 100%;
		// logo
		.img-logo {
			padding-top: 96upx;
			margin-bottom: 52upx;
			.uni-image {
				width: 108upx;
				height: 103upx;
			}
		}
		// 标题
		.img-title {
			.uni-image {
				width: 656upx;
				height: 201upx;
			}
		}
		// 菜单导航
		.navs-wrapper {
			position: relative;  // 设置层级，以防被背景图遮盖
			z-index: 99;
			width: 100%;
			text-align: center;
			.nav-item {
				margin-bottom: 32upx;
				// 按钮图片
				.uni-image {
					width: 532upx;
					height: 149upx;
					vertical-align: middle;
				}
			}
		}
	}
	
</style>
